<template>
	<view class="">
		<view class="background"
			v-if="user_status == 3 || user_status == 4 || user_status == 5 || user_status == 6 || user_status == 1">
		</view>
		<navView v-if="user_status == 2" navTitle="项目列表" titleColor="#fff" :isBack="true"></navView>
		<navView v-if="user_status != 2" navTitle="项目列表" backgroundColor="#008efe" titleColor="#fff" :isBack="true">
		</navView>
		<view class="topBox" :style="{ top: 43 + statusBarHeight + 'px' }">
			<view class="input-box" v-if="user_status != 2">
				<view class="input">
					<image src="https://hfd.bjlzkj.com/static/projectList/search.png" mode=""></image>
					<input v-model="search" type="text" placeholder="客户名称" />
				</view>
				<image class="shai" @click="onSearch" src="https://hfd.bjlzkj.com/static/projectList/shai.png" mode="">
				</image>
			</view>
			<view class="stateList" v-if="user_status != 2">
				<view :class="state_index == index ? 'items' : 'item'" v-for="(item, index) in filteredStateList"
					:key="item.value" @tap="tapState(item.value)">
					{{ item.name }}
					<view class="tiao" v-if="state_index == index"></view>
				</view>
			</view>
		</view>

		<view class="project-list" v-if="user_status == 2">
			<!-- 循环渲染每个项目 -->
			<view class="project-card" v-for="(project, index) in projects" :key="index">
				<!-- 项目名称和状态 -->
				<view class="project-header"
					@tap="$navTo('/subpkg/contract/contractDetail/contractDetail?id=' + project.id)">
					<text>{{ project.name }}</text>
					<text
						:class="['status-tag', project.contract_status == 0 ? 'completed' : project.contract_status == 1 ? 'ongoing' : project.contract_status == 2 ? 'not-started' : '']">
						{{ project.contract_status == 0 ? '未开始' : project.contract_status == 1 ? '进行中' :
						project.contract_status == 2 ? '已完成' :
						'' }}
					</text>
				</view>
				<!-- 负责人信息 -->
				<view class="project-detail">
					<view class="userbox" @tap="showStatusPhone('sale', index)">
						<view class="text">销售：{{ project.sale.name || "暂无" }}</view>
						<!-- 电话号码 -->
						<view class="phone-wrapper" v-if="showSalePhone[index]">
							<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
							</image>
							<text>{{ project.sale.mobile || "暂无" }}</text>
						</view>
					</view>
					<view class="userbox" @tap="showStatusPhone('technology', index)">
						<view class="text">技术：{{ project.technology.name || "暂无" }}</view>
						<!-- 电话号码 -->
						<view class="phone-wrapper" v-if="showTechnologyPhone[index]">
							<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
							</image>
							<text>{{ project.technology.mobile || "暂无" }}</text>
						</view>
					</view>
					<view class="userbox" @tap="showStatusPhone('finance', index)">
						<view class="text">财务：{{ project.finance.name || "暂无" }}</view>
						<!-- 电话号码 -->
						<view class="phone-wrapper" v-if="showFinancePhone[index]">
							<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
							</image>
							<text>{{ project.finance.mobile || "暂无" }}</text>
						</view>
					</view>
					<view class="userbox" @tap="showStatusPhone('executive', index)">
						<view class="text">行政：{{ project.executive.name || "暂无" }}</view>
						<!-- 电话号码 -->
						<view class="phone-wrapper" v-if="showExecutivePhone[index]">
							<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
							</image>
							<text>{{ project.executive.mobile || "暂无" }}</text>
						</view>
					</view>
				</view>
				<!-- 功能标签栏 -->
				<view class="tab-bar">
					<text class="tab-item"
						@tap="$navTo('/subpkg/contract/contractDetail/contractDetail?id=' + project.id)">合同详情</text>
					<text class="tab-item"
						@tap="$navTo('/subpkg/contract/contractState/contractState?id=' + project.id)">项目成果</text>
					<text class="tab-item" @tap="$navTo('/subpkg/contract/pay/pay?id=' + project.id)">合同付款</text>
					<text class="tab-item"
						@tap="$navTo('/subpkg/contract/contractOrder/contractOrder?id=' + project.id)">开票情况</text>
				</view>
				<!-- 服务评价 -->
				<view class="service-evaluation">
					<text>服务评价</text>
					<view @click="handleEvaluation(project)">立即评价
						<image class="right" src="https://hfd.bjlzkj.com/static/list/right-arror.png" mode=""></image>
					</view>
				</view>
			</view>
			<view v-if="isLoading" class="loading-text">加载中...</view>
			<view v-if="isNoMore && projects.length > 0" class="no-more-text">已经到底啦~</view>
		</view>
		<view class="project-box" v-if="user_status != 2">
			<view v-if="state_index == 0">
				<view style="margin-top: 80rpx;"></view>
				<view class="project-list2" v-for="(project, index) in projects" :key="index">
					<!-- 循环渲染每个项目 -->
					<view class="project-title">
						<view class="tite">
							{{ project.template_name }}
						</view>
						<view class="right" @tap="$navTo('/pages/projectList/list')">
							更多 <uni-icons type="right" size="20rpx" color="#C3C3C3"></uni-icons>
						</view>
					</view>
					<view class="project-card" v-for="(contarct, contarctIndex) in project.contracts"
						:key="contarctIndex">
						<!-- 项目名称和状态 -->
						<view class="project-header">
							<text>{{ contarct.name }}</text>
							<text
								:class="['status-tag', contarct.contract_status == 0 ? 'completed' : contarct.contract_status == 1 ? 'ongoing' : contarct.contract_status == 2 ? 'not-started' : '']">
								{{ contarct.contract_status == 0 ? '未开始' : contarct.contract_status == 1 ? '进行中' :
								contarct.contract_status
								== 2 ?
								'已完成' : '' }}
							</text>
						</view>
						<!-- 负责人信息 -->
						<view class="project-detail">
							<view class="userbox" @tap="showPhone('sale', state_index, index, contarctIndex)">
								<view class="text">销售：{{ contarct.sale.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showSalePhone[getUniqueIndex(state_index, index, contarctIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ contarct.sale.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showPhone('technology', state_index, index, contarctIndex)">
								<view class="text">技术：{{ contarct.technology.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showTechnologyPhone[getUniqueIndex(state_index, index, contarctIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ contarct.technology.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showPhone('finance', state_index, index, contarctIndex)">
								<view class="text">财务：{{ contarct.finance.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showFinancePhone[getUniqueIndex(state_index, index, contarctIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ contarct.finance.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showPhone('executive', state_index, index, contarctIndex)">
								<view class="text">行政：{{ contarct.executive.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showExecutivePhone[getUniqueIndex(state_index, index, contarctIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ contarct.executive.mobile || '暂无' }}</text>
								</view>
							</view>
						</view>
						<!-- 功能标签栏 -->
						<view class="tab-bar">
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractDetail/contractDetail?id=' + contarct.id)">合同详情</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractState/contractState?id=' + contarct.id)">项目进度</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/pay/pay?id=' + contarct.id)">合同付款</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractOrder/contractOrder?id=' + contarct.id)">开票情况</text>
						</view>
					</view>

				</view>
			</view>
			<view v-if="state_index == 1">
				<view style="margin-top: 80rpx;"></view>
				<view class="project-list2" v-for="(company, index) in companys" :key="index">
					<!-- 循环渲染每个项目 -->
					<view class="project-title">
						<view class="tite">
							{{ company.customer_name }}
						</view>
						<view class="right" @tap="$navTo('/pages/projectList/list')">
							更多 <uni-icons type="right" size="20rpx" color="#C3C3C3"></uni-icons>
						</view>
					</view>
					<view class="project-card" v-for="(project, projectIndex) in company.contracts" :key="projectIndex">
						<!-- 项目名称和状态 -->
						<view class="project-header"
							@tap="$navTo('/subpkg/contract/contractState/contractState?id=' + project.project_id)">
							<text>{{ project.name }}</text>
							<text
								:class="['status-tag', project.contract_status == 0 ? 'completed' : project.contract_status == 1 ? 'ongoing' : project.contract_status == 2 ? 'not-started' : '']">
								{{ project.contract_status == 0 ? '未开始' : project.contract_status == 1 ? '进行中' :
								project.contract_status == 2 ?
								'已完成' : '' }}
							</text>
						</view>
						<!-- 负责人信息 -->
						<view class="project-detail">
							<view class="userbox" @tap="showPhone('sale', state_index, index, projectIndex)">
								<view class="text">销售：{{ project.sale.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showSalePhone[getUniqueIndex(state_index, index, projectIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ project.sale.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showPhone('technology', state_index, index, projectIndex)">
								<view class="text">技术：{{ project.technology.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showTechnologyPhone[getUniqueIndex(state_index, index, projectIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ project.technology.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showPhone('finance', state_index, index, projectIndex)">
								<view class="text">财务：{{ project.finance.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showFinancePhone[getUniqueIndex(state_index, index, projectIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ project.finance.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showPhone('executive', state_index, index, projectIndex)">
								<view class="text">行政：{{ project.executive.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper"
									v-if="showExecutivePhone[getUniqueIndex(state_index, index, projectIndex)]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ project.executive.mobile || '暂无' }}</text>
								</view>
							</view>
						</view>
						<!-- 功能标签栏 -->
						<view class="tab-bar">
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractDetail/contractDetail?id=' + project.id)">合同详情</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractState/contractState?id=' + project.id)">项目进度</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/pay/pay?id=' + project.id)">合同付款</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractOrder/contractOrder?id=' + project.id)">开票情况</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="state_index == 2">
				<view style="margin-top: 80rpx;"></view>
				<view class="project-list2" v-for="(company, index) in paylist" :key="index">
					<!-- 循环渲染每个项目 -->
					<view class="project-title">
						<view class="tite">
							{{ company.customer.name }}
						</view>
						<view class="right">
							更多 <uni-icons type="right" size="20rpx" color="#C3C3C3"></uni-icons>
						</view>
					</view>
					<view class="project-card" v-for="(contract, projectindex) in company.contracts" :key="projectindex"
						@tap="$navTo('/subpkg/contract/pay/pay?id=' + contract.id)">
						<!-- 项目名称和状态 -->
						<view class="project-header">
							<text>{{ contract.name }}</text>
							<text
								:class="['status-tag', contract.pay_status == 0 ? 'completed' : contract.pay_status == 1 ? 'ongoing' : contract.pay_status == 2 ? 'not-started' : '']">
								{{ contract.pay_status == 0 ? '未支付' : contract.pay_status == 1 ? '已支付' :
								contract.pay_status == 2 ?
								'已完成' : '' }}
							</text>
						</view>
						<view class="project-price">
							待付款金额：<text>{{ contract.total - contract.received }}元</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="state_index == 3">
				<view style="margin-top: 80rpx;"></view>
				<view class="project-list">
					<!-- 循环渲染每个项目 -->
					<view class="project-card" v-for="(item, index) in invoice" :key="index">
						<!-- 项目名称和状态 -->
						<view class="project-header">
							<text>{{ item.name }}</text>
							<text
								:class="['status-tag', item.invoice_status == 0 ? 'completed' : item.invoice_status == 1 ? 'ongoing' : item.invoice_status == 2 ? 'not-started' : '']">
								{{ item.invoice_status == 0 ? '未开票' : item.invoice_status == 1 ? '部分开票' :
								item.invoice_status == 2 ? '开票完成' : '' }}
							</text>
						</view>
						<!-- 负责人信息 -->
						<view class="project-detail">
							<view class="userbox" @tap="showStatusPhone('sale', index)">
								<view class="text">销售：{{ item.sale.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper" v-if="showSalePhone[index]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ item.sale.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showStatusPhone('technology', index)">
								<view class="text">技术：{{ item.technology.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper" v-if="showTechnologyPhone[index]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ item.technology.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showStatusPhone('finance', index)">
								<view class="text">财务：{{ item.finance.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper" v-if="showFinancePhone[index]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ item.finance.mobile || '暂无' }}</text>
								</view>
							</view>
							<view class="userbox" @tap="showStatusPhone('executive', index)">
								<view class="text">行政：{{ item.executive.name || '暂无' }}</view>
								<!-- 电话号码 -->
								<view class="phone-wrapper" v-if="showExecutivePhone[index]">
									<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png"
										mode="">
									</image>
									<text>{{ item.executive.mobile || '暂无' }}</text>
								</view>
							</view>
						</view>
						<!-- 功能标签栏 -->
						<view class="tab-bar">
							<!-- <text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractList/contractList?id=' + item.id)">合同列表</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractState/contractState?id=' + item.id)">项目成果</text>
							<text class="tab-item"
								@tap="$navTo('/subpkg/contract/contractList/contractList?id=' + item.id)">合同付款</text> -->
							<text class="tab-item"
								@tap="$navTo('/subpkg/invoice/invoiceDetail?id=' + item.id)">开票情况</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="state_index == 4" class="staff-list">
				<view style="margin-top: 80rpx;"></view>
				<view v-for="(staff, index) in staffList" :key="index" class="staff-card">
					<view class="top-section">
						<view class="avatar-wrapper">
							<view class="avatar">{{ staff.name.charAt(0) }}</view>
							<view class="badge">{{ staff.contract.length }}</view>
						</view>
						<view class="staff-meta">
							<text class="name">{{ staff.name }}</text>
							<text class="contract-count">负责合同 {{ staff.contract.length }} 个</text>
						</view>
					</view>
					<scroll-view class="contract-scroll" scroll-x="true">
						<view class="contract-container">
							<view v-for="(contract, cIndex) in staff.contract" :key="cIndex" class="contract-item">
								<text class="contract-name">{{ contract.name }}</text>
								<view class="contract-detail">
									<text class="num">编号: {{ contract.num }}</text>
									<text class="price">金额: ¥{{ contract.total_price }}</text>
									<text class="date">{{ contract.order_date }}</text>
								</view>
							</view>
							<view v-if="staff.contract.length === 0" class="empty-tip">
								暂无负责合同
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			projects: [],
			companys: [],
			paylist: [],
			invoice: [],
			user_status: null,
			statusBarHeight: '',
			search: '',
			stateList: [{
				name: '项目',
				value: 0
			},
			{
				name: '公司',
				value: 1
			},
			{
				name: '付款',
				value: 2
			},
			{
				name: '开票',
				value: 3
			},
			{
				name: '人员',  // 新增人员分类
				value: 4
			}],
			staffList: [],
			state_index: 0,
			showSalePhone: {},
			showTechnologyPhone: {},
			showFinancePhone: {},
			showExecutivePhone: {},
			// 新增分页相关状态
			currentPage: 1,
			totalPages: 1,
			isLoading: false,
			isNoMore: false,
		}
	},
	computed: {
		filteredStateList() {
			switch (this.user_status) {
				case 1: // 管理员全部显示
					return this.stateList.filter(item => [0, 1, 4].includes(item.value));
				case 3: // 财务-只显示项目、公司、付款
					return this.stateList.filter(item => [0, 1, 2].includes(item.value));
				case 4: // 技术-只显示项目和公司
					return this.stateList.filter(item => [0, 1].includes(item.value));
				case 5: // 财务全部显示
					return this.stateList;
				case 6: // 行政-只显示项目
					return this.stateList.filter(item => item.value === 0);
				default: // 默认显示全部
					return this.stateList;
			}
		}
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
		this.user_status = this.userInfo?.role || 2

		const app = getApp();
		// 获取机型状态栏信息
		const {
			statusBarHeight,
		} = app.globalData;
		this.statusBarHeight = statusBarHeight;
	},
	onShow() {
		var userInfo = uni.getStorageSync('userInfo')
		this.user_status = userInfo.role
		this.getList()
	},
	// 新增滚动到底部监听
	onReachBottom() {
		if (!this.isNoMore) {
			this.getList();
		}
	},
	methods: {
		onSearch() {
			uni.navigateTo({
				url: '/pages/index/search?keywords=' + this.search
			})
		},
		handleEvaluation(project) {
			uni.navigateTo({
				url: '/subpkg/contract/evaluate/evaluate?contractID=' + project.id
			})
		},
		tapState(ind) {
			console.log(ind, 'ind');
			this.state_index = ind
			// 重置所有分页状态
			this.currentPage = 1;
			this.totalPages = 1;
			this.isNoMore = false;
			this.projects = [];
			this.companys = [];
			this.paylist = [];
			this.invoice = [];
			this.staffList = [];
			this.getList();
		},
		getList() {
			if (this.user_status == 2) {
				console.log('触发加载，当前页码:', this.currentPage, '是否加载中:', this.isLoading, '是否无更多:', this.isNoMore);
				// 加载状态控制
				if (this.isLoading || this.isNoMore) return;
				this.isLoading = true;
				uni.showLoading({ title: '加载中', mask: true });

				this.$request('/addons/qingdong/contract/getUserSelectList', 'GET', {
					page: this.currentPage,  // 添加分页参数

				}).then(res => {
					const response = res.data;
					if (response.data && response.data.length > 0) {
						// 首屏加载替换数据，翻页加载拼接数据
						this.projects = this.currentPage === 1
							? response.data
							: [...this.projects, ...response.data];

						// 初始化/扩展联系电话显示状态数组
						if (this.currentPage === 1) {
							this.showSalePhone = response.data.map(() => false);
							this.showTechnologyPhone = response.data.map(() => false);
							this.showFinancePhone = response.data.map(() => false);
							this.showExecutivePhone = response.data.map(() => false);
						} else {
							response.data.forEach(() => {
								this.showSalePhone.push(false);
								this.showTechnologyPhone.push(false);
								this.showFinancePhone.push(false);
								this.showExecutivePhone.push(false);
							});
						}

						// 更新分页状态
						this.totalPages = response.last_page || 1;  // 根据接口实际返回字段调整
						this.isNoMore = this.currentPage >= this.totalPages;
						this.currentPage++;
					} else {
						this.isNoMore = true;  // 无更多数据
						if (this.currentPage === 1) this.projects = [];  // 首屏无数据
					}
				}).catch(() => {
					this.isNoMore = true;  // 错误时停止加载
				}).finally(() => {
					this.isLoading = false;
					uni.hideLoading();
				})
			} else {
				if (this.isLoading || this.isNoMore) return;
				this.isLoading = true;
				uni.showLoading({ title: '加载中', mask: true });

				let apiUrl = '';
				let dataKey = '';
				switch (this.state_index) {
					case 0:
						apiUrl = '/addons/qingdong/project/getProjectContract';
						dataKey = 'projects';
						break;
					case 1:
						apiUrl = '/addons/qingdong/project/getCompanyProject';
						dataKey = 'companys';
						break;
					case 2:
						apiUrl = '/addons/qingdong/project/getContractPaymentList';
						dataKey = 'paylist';
						break;
					case 3:
						apiUrl = '/addons/qingdong/project/getContractInvoice';
						dataKey = 'invoice';
						break;
					case 4:
						apiUrl = '/addons/qingdong/contract/getAllUserContractList';
						dataKey = 'staffList';
						break;
				}

				this.$request(apiUrl, 'GET', {
					page: this.currentPage,
					per_page: 5 // 与后台约定的每页条数
				}).then(res => {
					const response = res.data;

					if (response.data && response.data.length > 0) {
						this[dataKey] = this.currentPage === 1
							? response.data
							: [...this[dataKey], ...response.data];

						this.totalPages = response.last_page;
						this.isNoMore = this.currentPage >= this.totalPages;
						this.currentPage++;
						console.log(this.companys, 'companys');
					} else {
						this.isNoMore = true;
						console.log(this.companys, 'companys');
						if (this.currentPage === 1) this[dataKey] = [];
					}
				}).catch(() => {
					this.isNoMore = true;
				}).finally(() => {
					this.isLoading = false;
					uni.hideLoading();
				})
			}
		},
		showStatusPhone(type, index) {
			// 根据角色类型构造对应的状态变量名
			const statusKey = `show${type.charAt(0).toUpperCase() + type.slice(1)}Phone`;
			// 切换指定索引的电话显示状态
			this.$set(this[statusKey], index, !this[statusKey][index]);
		},
		showPhone(type, stateIndex, outerIndex, innerIndex) {
			const uniqueIndex = this.getUniqueIndex(stateIndex, outerIndex, innerIndex);
			const key = `show${type.charAt(0).toUpperCase() + type.slice(1)}Phone`;
			this.$set(this[key], uniqueIndex, !this[key][uniqueIndex]);
		},
		getUniqueIndex(stateIndex, outerIndex, innerIndex) {
			return `${stateIndex}-${outerIndex}-${innerIndex !== null ? innerIndex : 'null'}`;
		}
	}
}
</script>

<style lang="scss">
.background {
	background: #f5f6f9;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

@mixin text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.staff-list {
    padding: 20rpx;

    .staff-card {
        background: #fff;
        border-radius: 24rpx;
        padding: 32rpx;
        margin-bottom: 32rpx;
        box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
        
        .top-section {
            display: flex;
            align-items: center;
            margin-bottom: 32rpx;
            
            .avatar-wrapper {
                position: relative;
                margin-right: 24rpx;
                
                .avatar {
                    width: 96rpx;
                    height: 96rpx;
                    border-radius: 50%;
                    background: linear-gradient(135deg, #008efe, #00c7fe);
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 40rpx;
                    font-weight: 500;
                }
                
                .badge {
                    position: absolute;
                    right: -12rpx;
                    top: -12rpx;
                    background: #ff4d4f;
                    color: white;
                    min-width: 40rpx;
                    height: 40rpx;
                    border-radius: 20rpx;
                    font-size: 24rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 10rpx;
                    box-shadow: 0 4rpx 12rpx rgba(255,77,79,0.2);
                }
            }

            .staff-meta {
                flex: 1;
                .name {
                    font-size: 36rpx;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: 8rpx;
                    @include text-ellipsis;
                }
                
                .contract-count {
                    font-size: 26rpx;
                    color: #999;
					margin-left: 30rpx;
                }
            }
        }

        .contract-scroll {
            width: 100%;
            
            .contract-container {
                display: inline-flex;
                gap: 20rpx;
                
                .contract-item {
                    background: #f8f9fa;
                    border-radius: 16rpx;
                    padding: 24rpx;
                    width: 320rpx;
                    flex-shrink: 0;
                    
                    .contract-name {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: 500;
                        @include text-ellipsis;
                    }
                    
                    .contract-detail {
                        margin-top: 16rpx;
                        text {
                            display: block;
                            font-size: 24rpx;
                            color: #666;
                            @include text-ellipsis;
                            
                            &.price {
                                color: #ff4d4f;
                                font-weight: 500;
                            }
                        }
                    }
                }
                
                .empty-tip {
                    width: 100%;
                    color: #999;
                    font-size: 28rpx;
                    padding: 24rpx;
                    text-align: center;
                }
            }
        }
    }
}

.topBox {
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 100;

	.input-box {
		background: #008efe;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 60rpx;
		box-sizing: border-box;

		.input {
			background: #fff;
			border-radius: 40rpx;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			input {
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}

		.shai {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.stateList {
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.items {
			font-weight: bold;
			font-size: 30rpx;
			color: #008EFE;
			position: relative;
			padding: 20rpx 0;

			.tiao {
				width: 38rpx;
				height: 4rpx;
				background: #64AFFF;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
				position: absolute;
				bottom: 0rpx;
				left: 50%;
				transform: translate(-50%);
			}
		}

		.item {
			font-size: 30rpx;
			color: #AFAFB2;
			padding: 20rpx 0;
		}
	}
}

/* 新增分页提示样式 */
.loading-text {
	text-align: center;
	padding: 32rpx 0;
	color: #1890ff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	&::after {
		content: '';
		display: inline-block;
		margin-left: 16rpx;
		width: 28rpx;
		height: 28rpx;
		border: 4rpx solid #1890ff;
		border-radius: 50%;
		border-top-color: transparent;
		animation: rotate 0.8s linear infinite;
	}
}

.no-more-text {
	text-align: center;
	padding: 48rpx 0;
	color: #999;
	font-size: 24rpx;
	position: relative;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 100rpx;
		height: 1rpx;
		background: #eee;
	}

	&::before {
		left: 20%;
	}

	&::after {
		right: 20%;
	}
}

.project-list {
	padding: 20rpx;



	.project-card {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 15rpx 0rpx #ccc;

		.project-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
			}

			.status-tag {
				border-radius: 10rpx;
				padding: 6rpx 12rpx;
				font-size: 24rpx;
				font-weight: bold;

				&.completed {
					background-color: rgba(0, 160, 105, 0.1);
					color: #00a069;
				}

				&.ongoing {
					background-color: rgba(0, 122, 255, 0.1);
					color: #007aff;
				}

				&.not-started {
					background-color: rgba(255, 58, 58, 0.1);
					color: #ff3a3a;
				}
			}
		}

		.project-detail {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.userbox {
				width: 25%;
				position: relative;

				.text {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.phone-wrapper {
				position: absolute;
				bottom: -50rpx;
				left: 0;
				z-index: 10;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				background: #fff;
				box-shadow: 0 2rpx 6rpx 2rpx #c1c1c1;
				padding: 3rpx 5rpx;
				box-sizing: 10rpx;

				.image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.tab-bar {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			margin-top: 60rpx;

			.tab-item {
				width: 20%;
				text-align: center;
				padding: 8rpx 0;
				background-color: #e0f1ff;
				border-radius: 10rpx;
				color: #007aff;
				font-size: 24rpx;
				border-radius: 5rpx;
			}
		}

		.service-evaluation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #E56C2B;
			background-color: #F5F5F5;
			padding: 10rpx 10rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.right {
				width: 8rpx;
				height: 16rpx;
				margin-left: 20rpx;
			}
		}
	}
}

.project-box {
	padding: 20rpx;
	box-sizing: border-box;
	margin-top: 70rpx;

	.project-list2 {
		background-color: #fff;
		border-radius: 16rpx;

		.project-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #e5f3ff;
			padding: 26rpx 20rpx;
			box-sizing: border-box;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #B0B0B0;

			.tite {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}
		}

		.project-card:last-child {
			border: 0;
		}

		.project-card {
			overflow: hidden;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.project-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				text {
					font-size: 32rpx;
					font-weight: bold;
				}

				.status-tag {
					border-radius: 10rpx;
					padding: 6rpx 12rpx;
					font-size: 24rpx;
					font-weight: bold;

					&.completed {
						background-color: rgba(0, 160, 105, 0.1);
						color: #00a069;
					}

					&.ongoing {
						background-color: rgba(0, 122, 255, 0.1);
						color: #007aff;
					}

					&.not-started {
						background-color: rgba(255, 58, 58, 0.1);
						color: #ff3a3a;
					}
				}
			}

			.project-price {
				font-weight: 400;
				font-size: 24rpx;
				color: #7D7D7D;

				text {
					color: #000000;
				}
			}

			.project-detail {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.userbox {
					width: 25%;
					position: relative;

					.text {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.phone-wrapper {
					position: absolute;
					bottom: -50rpx;
					left: 0;
					z-index: 10;
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					background: #fff;
					box-shadow: 0 2rpx 6rpx 2rpx #c1c1c1;
					padding: 3rpx 5rpx;
					box-sizing: 10rpx;

					.image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}

			.tab-bar {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				margin-top: 60rpx;

				.tab-item {
					width: 20%;
					text-align: center;
					padding: 8rpx 0;
					background-color: #e0f1ff;
					border-radius: 10rpx;
					color: #007aff;
					font-size: 24rpx;
					border-radius: 5rpx;
				}
			}

			.service-evaluation {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #E56C2B;
				background-color: #F5F5F5;
				padding: 10rpx 10rpx;
				box-sizing: border-box;
				border-radius: 10rpx;

				.right {
					width: 8rpx;
					height: 16rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
}
</style>